<template>
    <view>
        <view>
            <scroll-view scroll-x class="bg-white nav text-center">
                <view :class="'cu-item ' + (wall === 1 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="1">留言板</view>
                <view :class="'cu-item ' + (wall === 2 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="2">许愿墙</view>
                <view :class="'cu-item ' + (wall === 3 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="3">失物寻找</view>
                <view :class="'cu-item ' + (wall === 4 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="4">寻找失主</view>
            </scroll-view>
            <!-- 留言板 -->
            <view v-if="wall === 1">
                <view class="cu-card dynamic">
                    <view class="cu-item shadow">
                        <view class="cu-form-group margin-top">
                            <textarea @input="CommentInput" :value="Comment" placeholder="在此留言"></textarea>
                        </view>
                        <view class="cu-form-group margin-top">
                            <button class="cu-btn block bg-blue margin-tb-sm lg" @tap="CommentSend" type="">发表</button>
                        </view>
                    </view>
                </view>
                <view class="cu-card dynamic" v-for="(comment, index) in commentData" :key="index">
                    <view class="cu-item shadow">
                        <view class="cu-list menu-avatar">
                            <view class="cu-item">
                                <view class="cu-avatar round lg"
                                      :style="'background-image:url(' + comment.AvatarUrl + ');'"></view>
                                <view class="content flex-sub">
                                    <view>{{ comment.name }}</view>
                                    <view class="text-gray text-sm flex justify-between">
                                        {{ comment.time }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="text-content">
                            <!-- <template is="wxParse" :data="wxParseData:ContentArr[index]"/> -->
                            <mp-html :content="comment.content"></mp-html>
                        </view>

                        <view class="text-gray text-sm text-right padding">
                            <!-- <text class="cuIcon-appreciatefill margin-lr-xs"></text>
                            {{ comment.thumb }} -->
                            <text class="cuIcon-messagefill margin-lr-xs"></text>
                            {{ comment.num }}
                        </view>
                        <view class="cu-list menu-avatar comment solids-top">
                            <view class="cu-item" v-for="(reply, index1) in comment.CommentList" :key="index1">
                                <view class="cu-avatar round"
                                      :style="'background-image:url(' + reply.AvatarUrl + ');'"></view>

                                <view class="content">
                                    <view class="text-grey">{{ reply.name }}</view>
                                    <view class="text-gray text-content text-df">
                                        {{ reply.content }}
                                    </view>
                                    <view class="margin-top-sm flex justify-between">
                                        <view class="text-gray text-df">{{ reply.time }}</view>
                                        <view></view>
                                    </view>
                                </view>
                            </view>
                            <view class="cu-item" v-if="true">
                                <view class="cu-avatar round"
                                      :style="'background-image:url(' + userInfo.USER_PIC + ');'"></view>
                                <view class="content">
                                    <view class="text-grey">{{ userInfo.name }}</view>
                                    <view class="text-gray text-content text-df">
                                        <view
                                            class="cu-form-group margin-top"
                                            style="background-color: #f5f5f5; width: 547rpx; height: 64rpx; display: flex; box-sizing: border-box;">

                                            <input placeholder="评论..." :value="reply.content" @input="inputReply"
                                                   :data-for="comment.Id"/>
                                        </view>
                                        <view class="margin-tb-sm text-right">
                                            <button
                                                class="cu-btn bg-blue"
                                                @tap="ReplySend"
                                                type=""
                                                style="width: 122rpx; height: 57rpx; display: inline-flex; box-sizing: border-box; left: -5rpx; top: 0rpx; position: relative">
                                                发表
                                            </button>
                                        </view>
                                    </view>
                                    <view class="margin-top-sm flex justify-between"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 许愿墙 -->
            <view v-if="wall === 2">
                <view class="cu-card dynamic">
                    <view class="cu-item shadow">
                        <view class="cu-form-group margin-top">
                            <textarea @input="WishInput" :value="Wish" placeholder="在此许愿"></textarea>
                        </view>
                        <view class="cu-form-group margin-top">
                            <view class="title">昵称</view>
                            <input @input="NameInput" placeholder="匿名昵称"/>
                            <button
                                class="cu-btn block bg-blue margin-tb-sm"
                                @tap="WishSend"
                                type=""
                                style="width: 265rpx; height: 59rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"
                            >
                                许愿
                            </button>
                        </view>
                    </view>
                </view>
                <view class="cu-card dynamic" v-for="(wish, index) in wishData" :key="index">
                    <view class="cu-item shadow">
                        <view class="cu-list menu-avatar">
                            <view class="cu-item">
                                <view class="cu-avatar round lg"
                                      :style="'background-image:url(' + ApiUrl + '/image/12.png)'"></view>
                                <view class="content flex-sub">
                                    <view>{{ wish.nickname }}</view>
                                    <view class="text-gray text-sm flex justify-between">
                                        {{ wish.time }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="text-content">
                            {{ wish.content }}
                        </view>
                    </view>
                </view>
            </view>
            <!-- 失物寻找 -->
            <view v-if="wall === 3">
                <view class="box">
                    <view class="cu-bar search bg-white">
                        <view class="search-form round">
                            <text class="cuIcon-search"></text>
                            <input
                                type="text"
                                placeholder="搜索失物（标签搜索格式：tag:手机）"
                                confirm-type="search"
                                style="width: 169rpx; height: 64rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"
                                @input="InputThing"/>
                        </view>
                        <view class="action">
                            <button
                                class="cu-btn bg-blue shadow-blur round"
                                style="width: 118rpx; height: 64rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"
                                @tap="SearchThing"
                            >
                                搜索
                            </button>
                        </view>
                    </view>
                    <view class="cu-bar search bg-white">
                        <button
                            class="cu-btn bg-red shadow-red"
                            data-type="master"
                            @tap="Publish"
                            style="width: 100%; height: 64rpx; margin-left: 5%;margin-right: 5%;">
                            发布寻物启事
                        </button>
                    </view>
                </view>
                <view class="cu-card article" @tap="Detail" data-type="thing" :data-val="oneThing.Id"
                      v-for="(oneThing, index) in thingList" :key="index">
                    <view class="cu-item shadow">
                        <view class="title">
                            <view class="text-cut">
                                {{ oneThing.title }}
                                <view class="cu-tag bg-gray light sm round" v-if="oneThing.complete === 1">已认领</view>
                                <view class="cu-tag bg-green light sm round" v-if="oneThing.complete === 0">未认领</view>
                                <view class="cu-tag bg-yellow light sm round" v-if="oneThing.hasReward === 1">要报酬</view>
                            </view>
                        </view>
                        <view class="content">
                            <image v-if="oneThing.hasImg === 1" :src="oneThing.ImgUrl" mode="aspectFill"></image>
                            <view class="desc">
                                <view class="text-content">{{
                                        oneThing.content === '' ? '它没有编辑详情内容哦' : oneThing.content
                                    }}
                                </view>
                                <view>
                                    <view class="cu-tag bg-red light sm round" v-for="(tag, index1) in oneThing.tags"
                                          :key="index1">{{ tag }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 寻找失主 -->
            <view v-if="wall === 4">
                <view class="box">
                    <view class="cu-bar search bg-white">
                        <view class="search-form round">
                            <text class="cuIcon-search"></text>
                            <input
                                type="text"
                                placeholder="搜索失主（标签搜索格式：tag:手机）"
                                confirm-type="search"
                                style="width: 169rpx; height: 64rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"
                                @input="InputMaster"/>
                        </view>
                        <view class="action">
                            <button
                                class="cu-btn bg-blue shadow-blur round"
                                style="width: 118rpx; height: 64rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"
                                @tap="SearchMaster"
                            >
                                搜索
                            </button>
                        </view>
                    </view>
                    <view class="cu-bar search bg-white">
                        <button
                            class="cu-btn bg-red shadow-red"
                            data-type="thing"
                            style="width: 100%; height: 64rpx; margin-left: 5%;margin-right: 5%;"
                            @tap="Publish">
                            发布寻主启示（寻找失主）
                        </button>
                    </view>
                </view>
                <view class="cu-card article" @tap="Detail" data-type="master" :data-val="oneMaster.Id"
                      v-for="(oneMaster, index) in masterList" :key="index">
                    <view class="cu-item shadow">
                        <view class="title">
                            <view class="text-cut">
                                {{ oneMaster.title }}
                                <view class="cu-tag bg-gray light sm round" v-if="oneMaster.complete === 1">已找到</view>
                                <view class="cu-tag bg-green light sm round" v-if="oneMaster.complete === 0">未找到</view>
                                <view class="cu-tag bg-yellow light sm round" v-if="oneMaster.hasReward === 1">有报酬
                                </view>
                            </view>
                        </view>
                        <view class="content">
                            <image v-if="oneMaster.hasImg === 1" :src="oneMaster.ImgUrl" mode="aspectFill"></image>
                            <view class="desc">
                                <view class="text-content">
                                    {{ oneMaster.content === '' ? '它没有编辑详情内容哦' : oneMaster.content }}
                                </view>
                                <view>
                                    <view class="cu-tag bg-red light sm round" v-for="(tag, index1) in oneMaster.tags"
                                          :key="index1">{{ tag }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// index.js
// 获取应用实例
const app = getApp();
export default {
    data() {
        return {
            ApiUrl: app.globalData.ApiUrl,
            commentData: [],
            Comment: '',

            userInfo: {
                USER_PIC: '',
                name: ''
            },

            is: false,

            reply: {
                content: '',
                comment_id: '',
                AvatatUrl: '',
                name: '',
                time: ''
            },

            webConfig: {
                open_comment: ''
            },

            wall: 1,
            wishData: [],
            Wish: '',
            NickName: '',
            thingList: [],
            thing: '',

            //查找失物的搜索框内容
            masterList: [],

            master: '',
            comment: {
                AvatarUrl: '',
                name: '',
                time: '',
                CommentList: [],
                Id: ''
            },

            ContentArr: '',

            wish: {
                nickname: '',
                time: '',
                content: ''
            },

            oneThing: {
                Id: '',
                complete: 0,
                hasReward: 0,
                hasImg: 0,
                ImgUrl: '',
                content: '',
                tags: []
            },

            tag: '',

            oneMaster: {
                Id: '',
                complete: 0,
                hasReward: 0,
                hasImg: 0,
                ImgUrl: '',
                content: '',
                tags: []
            },
        };
    },
    onLoad: function (options) {
        uni.showLoading({
            title: '加载中...'
        });
        const that = this; //获取网站配置

        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/webConfig',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            data: {
                SafeCode: uni.getStorageSync('SafeCode')
            },
            success: function (res) {
                uni.hideLoading();

                console.log(res.data);

                that.setData({
                    webConfig: res.data
                });

                if (res.data.message != '') {
                    uni.showModal({
                        title: '公告',
                        content: that.webConfig.message,
                    });
                }

            }
        });

    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        var that = this;

        that.SafeCode = uni.getStorageSync('SafeCode'); //获取失物列表

        //获取失主列表
        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/thingList',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            method: 'GET',
            success: function (res) {
                that.setData({
                    thingList: res.data
                });
            }
        });

        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/masterList',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            method: 'GET',
            success: function (res) {
                that.setData({
                    masterList: res.data
                });
            }
        });

        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/UserInfo',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            data: {
                //这里写你要请求的参数
                SafeCode: this.SafeCode
            },
            success: function (res) {
                that.setData({
                    userInfo: res.data
                });
            }
        });

        //获取留言
        uni.request({
            header: {
                'Content-Type': 'application/json'
            },
            url: app.globalData.ApiUrl + 'api/Android/commentJson',
            success: function (res) {
                that.setData({
                    commentData: res.data
                });
            }
        }); //获取许愿

        uni.request({
            header: {
                'Content-Type': 'application/json'
            },
            url: app.globalData.ApiUrl + 'api/Android/WishJson',
            success: function (res) {
                that.setData({
                    wishData: res.data
                });

            }
        });
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        var that = this;
        that.SafeCode = uni.getStorageSync('SafeCode'); //获取失物列表

        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/thingList',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            method: 'GET',
            success: function (res) {
                that.setData({
                    thingList: res.data
                });
            }
        }); //获取失主列表

        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/masterList',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            method: 'GET',
            success: function (res) {
                that.setData({
                    masterList: res.data
                });
            }
        });
        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/UserInfo',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            data: {
                //这里写你要请求的参数
                SafeCode: this.SafeCode
            },
            success: function (res) {
                that.setData({
                    userInfo: res.data
                });
            }
        }); //获取留言

        uni.request({
            header: {
                'Content-Type': 'application/json'
            },
            url: app.globalData.ApiUrl + 'api/Android/commentJson',
            success: function (res) {
                that.setData({
                    commentData: res.data
                });
            }
        }); //获取许愿

        uni.request({
            header: {
                'Content-Type': 'application/json'
            },
            url: app.globalData.ApiUrl + 'api/Android/WishJson',
            success: function (res) {
                that.setData({
                    wishData: res.data
                });

            }
        });

        uni.stopPullDownRefresh();
    },

    methods: {

        //初始化
        onInit: function (e) {

        },

        //输入事件
        CommentInput: function (e) {
            this.setData({
                Comment: e.detail.value
            });
        },

        //提交留言
        CommentSend: function (e) {
            var that = this;
            uni.request({
                method: 'POST',
                url: app.globalData.ApiUrl + 'api/Android/CommentSend',
                data: {
                    Comment: that.Comment,
                    SafeCode: uni.getStorageSync('SafeCode')
                },
                header: {
                    'Content-Type': 'application/json'
                },
                success: function (res) {
                    if (res.data.result === 'success') {
                        that.setData({
                            Comment: ''
                        });
                        uni.showToast({
                            title: '发表成功',
                            // 标题
                            icon: 'success',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                        setTimeout(function () {
                            //获取留言
                            uni.request({
                                header: {
                                    'Content-Type': 'application/json'
                                },
                                url: app.globalData.ApiUrl + 'api/Android/commentJson',
                                success: function (res) {
                                    that.setData({
                                        commentData: res.data
                                    });
                                }
                            });

                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            // 标题
                            icon: 'error',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                    }
                }
            });
        },

        //输入评论
        inputReply: function (e) {
            var that = this;
            console.log(e);
            var content = e.detail.value;
            var comment_id = e.target.dataset.for;
            that.setData({
                'reply.content': content,
                'reply.comment_id': comment_id
            });
        },

        //提交评论
        ReplySend: function (e) {
            var that = this;
            var sendData = this.reply;
            sendData.SafeCode = uni.getStorageSync('SafeCode');
            uni.request({
                url: app.globalData.ApiUrl + 'api/Android/ReplySend',
                method: 'POST',
                data: sendData,
                success: function (res) {

                    if (res.data.result === 'success') {

                        that.setData({
                            'reply.content': ''
                        });

                        uni.showToast({
                            title: '发表成功',
                            // 标题
                            icon: 'success',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                        setTimeout(function () {

                            //获取留言
                            uni.request({
                                header: {
                                    'Content-Type': 'application/json'
                                },
                                url: app.globalData.ApiUrl + 'api/Android/commentJson',
                                success: function (res) {
                                    that.setData({
                                        commentData: res.data
                                    });
                                }
                            });

                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            // 标题
                            icon: 'error',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                    }
                }
            });
        },

        //切换页面
        tabSelect: function (e) {
            this.setData({
                wall: parseInt(e.currentTarget.dataset.id)
            });
        },

        //输入事件
        WishInput: function (e) {
            this.setData({
                Wish: e.detail.value
            });
        },

        NameInput: function (e) {
            this.setData({
                NickName: e.detail.value
            });
        },

        //提交许愿
        WishSend: function (e) {
            var that = this;
            uni.request({
                method: 'POST',
                url: app.globalData.ApiUrl + 'api/Android/WishSend',
                data: {
                    Wish: that.Wish,
                    NickName: that.NickName,
                    SafeCode: uni.getStorageSync('SafeCode')
                },
                header: {
                    'Content-Type': 'application/json'
                },
                success: function (res) {
                    if (res.data.result === 'success') {
                        that.setData({
                            Wish: ''
                        });
                        uni.showToast({
                            title: '许愿成功',
                            // 标题
                            icon: 'success',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                        setTimeout(function () {

                            //获取许愿
                            uni.request({
                                header: {
                                    'Content-Type': 'application/json'
                                },
                                url: app.globalData.ApiUrl + 'api/Android/WishJson',
                                success: function (res) {
                                    that.setData({
                                        wishData: res.data
                                    });

                                }
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            // 标题
                            icon: 'error',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                    }
                }
            });
        },

        InputThing: function (e) {
            this.setData({
                thing: e.detail.value
            });
        },

        InputMaster: function (e) {
            this.setData({
                master: e.detail.value
            });
        },

        SearchThing: function (e) {
            var that = this; //获取网站配置

            uni.request({
                url: app.globalData.ApiUrl + 'api/Android/thingList',
                //这里填写你的接口路径
                header: {
                    'Content-Type': 'application/json'
                },
                data: {
                    search: that.thing
                },
                method: 'POST',
                success: function (res) {
                    that.setData({
                        thingList: res.data
                    });
                }
            });
        },

        SearchMaster: function (e) {
            var that = this; //获取网站配置

            uni.request({
                url: app.globalData.ApiUrl + 'api/Android/MasterList',
                //这里填写你的接口路径
                header: {
                    'Content-Type': 'application/json'
                },
                data: {
                    search: that.master
                },
                method: 'POST',
                success: function (res) {
                    that.setData({
                        masterList: res.data
                    });
                }
            });
        },

        Detail: function (e) {
            var type = e.currentTarget.dataset.type;
            var val = e.currentTarget.dataset.val;
            uni.navigateTo({
                url: '../detail/detail?type=' + type + '&id=' + val
            });
        },

        //信息发布
        Publish: function (e) {
            var type = e.currentTarget.dataset.type;
            uni.navigateTo({
                url: '../publish/publish?type=' + type
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
